// base color
$blue:#4386DB;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E06565;
$green: #01B38B;
$tiffany: #4AB7BD;
$yellow:#FFFF00;
$pan-green: #30B08F;
$orange:#F09A44;
$gray:#909399;
$light-gray:#C2C2C2;

// sidebar
$menuText:rgba(0,0,0,.6);
$menuActiveText:rgba(1,179,139,1);
$subMenuActiveText:rgba(1,179,139,.8); // https://github.com/ElemeFE/element/issues/12951

$menuBg:rgba(255,255,255,1);
$menuHover:rgba(249,249,249,1);

$subMenuBg:rgba(255,255,255,.8);
$subMenuHover:rgba(249,249,249,.8);

$sideBarWidth: 210px;

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;

  colorPrimary:$blue;
  colorSuccess: $green;
  colorWarning: $orange;
  colorDanger: $red;
  colorInfo: $gray;

}
